<template>
  <div class="calendarBox">
    <div class="calendar">
        <el-calendar v-model="value">
        </el-calendar>
    </div>
    <div class="tabs">
    <nav-tabs type="border-card">
        <nav-tab-pane label="通知公告" class="value1">
            <ul v-for="(msgs,index) in information" :key="index">
                <li v-for="(i,d) in msgs.infor" :key="d">{{i.msg}}</li>
            </ul>
        </nav-tab-pane>
        <nav-tab-pane label="待办">
            <ul v-for="(msgs,index) in information" :key="index">
                <li v-for="(i,d) in msgs.waitdo" :key="d" class="waitdo">
                     <el-checkbox v-model="i.checked">{{i.msg}}</el-checkbox>
                </li>
            </ul>
        </nav-tab-pane>
        <nav-tab-pane label="已办">
             <ul v-for="(msgs,index) in information" :key="index">
                <li v-for="(i,d) in msgs.done" :key="d" class="waitdo">
                     <el-checkbox v-model="i.checked">{{i.msg}}</el-checkbox>
                </li>
            </ul>
        </nav-tab-pane>
        <nav-tab-pane label="完成">完成</nav-tab-pane>
        <nav-tab-pane label="抄送">抄送</nav-tab-pane>
    </nav-tabs>
    </div>
    <div class="footer">
    <div class="echarts">
        <!-- <echarts/> -->
    </div>
    </div>
  </div>
</template>

<script>
import echarts from './echarts.vue'
export default {
    name:'Homepage',
    components:{
        echarts
    },
    data(){
        return{
            value:new Date(),
            information:
            [
                
                {infor:[
                    {msg:'最新阶段已更新完毕'},
                    {msg:'最新科目已更新完毕'},
                    {msg:'最新项目已更新完毕'},
                    {msg:'最新项目已更新完毕'},
                    {msg:'最新项目已更新完毕'},
                    {msg:'最新项目已更新完毕'},
                ]},
                {waitdo:[
                    {msg:'张三提交的验收申请',checked: false},
                    {msg:'查看最新阶段信息', checked: false},
                    {msg:'李四对项目进行了添加是否同意',checked: false},
                ]},
                {done:[
                    {msg:'王五提交的验收申请',checked: true},
                    {msg:'王五验收通过',checked: true},
                    {msg:'新发布的消息查看',checked: true},
                ]}
            ]
        }
    }
};
</script>

<style scoped>
    .calendarBox {
        display: flex;
        /* flex-wrap: wrap; */
    }
    /* 日历样式 */
    .calendar{
        /* width: 490px; */
        border:5px solid #ccc;
        box-shadow: 1px 3px 5px rgba(0,0,0,0.5);
        margin-left: 20px;
        margin-top: 20px;
    }
    .calendarBox /deep/.el-calendar__body {
        padding: 12px 20px 10px;
    }
    /* 修改日历大小 */
    .calendar /deep/  .el-calendar-table .el-calendar-day {
    width: 60px;
    height: 40px;
   }
   /* 待办列表样式 */
   .tabs {
       width:650px;
       margin-left: 50px;
       margin-top: 20px;
   }
   .tabs /deep/.el-tabs__item {
       padding: 0 26px;
       height: 45px;
   }
   .tabs /deep/.el-tabs--border-card>.el-tabs__content{
       padding: 25px;
   }
   .tabs li {
       margin: 5px 0;
       font-size: 15px;
       list-style:circle;
   }
   .tabs .waitdo {
       list-style: none;
   }
   .footer {
       width: 100%;
       height: 100%;
       background-color: rgb(234, 240, 245);
       margin: 10px 30px;
   }
   /* .echarts{
       width: 350px;
       height: 320px;
       border:3px solid #ccc;
       margin: 10px 30px;
   } */

</style>